<template>
	<view class="root">
		<label class="balance">
			<text class="title">当前余额</text>
			<text class="amount">¥ {{ userInfo.balance || "0.00" }}</text>
		</label>
		<view class="option">
			<label class="title">{{ type ? "充值" : "提现" }}金额</label>
			<view class="input-number">
				<label>
					<text>¥</text>
					<input
						placeholder="输入金额"
						placeholder-class="input-money"
						v-model="amount"
						maxlength="9"
						class="input"
						type="digit"
					/>
				</label>
				<button
					@click="useAll"
					v-if="!type"
					hover-class="tap-hover"
					:plain="true"
				>
					全部提现
				</button>
			</view>
		</view>
		<view class="option">
			<label class="title">{{ type ? "充值方式" : "提现方式" }}</label>
			<radio-group @change="changeRadio" class="payment-methods">
				<label v-for="payment in paymentMethods" :key="payment.value">
					<text>{{ payment.title }}</text>
					<radio
						color="#5677fc"
						:checked="payment.checked"
						:disabled="payment.disabled"
						:value="payment.value"
					/>
				</label>
			</radio-group>

			<image
				v-if="payment === 'qrcode'"
				class="icon-receiveCode"
				mode="aspectFit"
				:src="qrCode || '/static/images/icon-receiveCode.png'"
				@click="uploadQrCode"
			/>
		</view>
		<button @click="submit" hover-class="tap-hover" class="btn-confirm">
			{{ type ? "充值" : "提现" }}
		</button>
	</view>
</template>

<script lang="ts">
	import { UserInfo } from "@/common/api";
	import Vue from "vue";
	import Component from "vue-class-component";
	import { $config } from "../common/index";
	import { Storage } from "../libs/utils";

	@Component
	export default class Withdrawal_topUp extends Vue {
		type: number = 1;
		userInfo: UserInfo = Storage.get("userInfo");
		amount: number | string = "";
		payment: string = "";

		qrCode: string = "";

		public get paymentMethods(): AnyObject[] {
			return this.type
				? [
						{
							value: "wechat",
							title: "微信支付",
							checked: true,
						},
				  ]
				: [
						{
							value: "wechat",
							title: "微信钱包（暂未支持）",
							disabled: true,
						},
						{
							value: "qrcode",
							title: "二维码收款",
							checked: true,
						},
				  ];
		}

		private onLoad({ type }: { type: string }): void {
			this.type = +type;
			this.payment = this.paymentMethods.find((item) => item.checked)?.value;
		}

		public changeRadio({ detail }: AnyObject): void {
			this.payment = detail.value;
		}

		public uploadQrCode(): void {
			uni.chooseImage({
				count: 1,
				success: ({ tempFilePaths }) => {
					this.qrCode = tempFilePaths[0];
				},
			});
		}

		public async submit(): Promise<void> {
			if (!this.amount) {
				uni.showToast({ title: "请输入金额", icon: "none" });
				return;
			}

			if (!this.type) {
				let qrcode = null;
				if (this.payment === "qrcode") {
					if (!this.qrCode) {
						uni.showToast({ title: "请上传收款码", icon: "none" });
						return;
					}
					const [uploadFail, uploadRes]: any = await uni.uploadFile({
						url: $config.API_URL + "/api/upimg",
						filePath: this.qrCode,
						name: "file",
						header: { token: Storage.get("userInfo")?.token },
					});

					if (uploadFail) {
						uni.showToast({ title: uploadFail.errMsg, icon: "none" });
						return;
					}

					const { data, code, msg: title } = JSON.parse(uploadRes.data);

					if (code !== 1) {
						uni.showToast({ title, icon: "none" });
						return;
					}

					qrcode = data;
				}

				const result = await this.request.get("/api/tixians", {
					total_fee: this.amount,
					qrcode,
				});
				uni.showToast({
					title: "已提交",
					duration: 1200,
					mask: true,
					success: () => setTimeout(uni.navigateBack, 1200),
				});

				return;
			}

			const { data } = await this.request.get(
				`/api/pay?total_fee=${this.amount}`
			);

			const [payFail, payResult]: any = await uni.requestPayment({
				provider: "wxpay",
				...data,
			});

			if (payFail) {
				uni.showToast({ title: "支付失败", icon: "none" });
				return;
			}
			uni.showToast({
				title: "充值成功",
				duration: 1200,
				mask: true,
				success: () => setTimeout(uni.navigateBack, 1200),
			});
		}

		public useAll(): void {
			this.amount = Number(this.userInfo.balance);
		}
	}
</script>

<style>
	.input-money {
		color: #999;
		font-weight: 500;
		font-size: 30rpx;
		line-height: 2;
	}
</style>

<style lang="scss" scoped>
	.root {
		.balance {
			height: 60rpx;
			padding: 0 30rpx;
			background-color: #f0f0f0;
			font-size: 24rpx;
			.title {
				color: #999;
				margin-right: 1em;
			}
			.amount {
				color: #5487e5;
			}
		}
		.option {
			margin: 30rpx;
			> .title {
				color: #333;
				font-size: 30rpx;
			}
			.input-number {
				margin: 60rpx 0;
				flex-direction: row;
				align-items: center;
				label {
					flex: 1;
					color: #1b1b1b;
					font-size: 60rpx;
					.input {
						height: 100%;
						flex: 1;
						padding: 0 30rpx;
						color: #1b1b1b;
						font-size: 60rpx;
					}
				}

				button {
					border: none;
					color: #5677fc;
					font-size: 24rpx;
				}
			}
			.payment-methods {
				margin-top: 30rpx;
				label {
					height: 90rpx;
					text {
						flex: 1;
						color: #999;
						font-size: 28rpx;
					}
				}
			}
			.icon-receiveCode {
				display: block;
				margin: 30rpx auto 0;
				width: 200rpx;
				height: 200rpx;
			}
		}
		.btn-confirm {
			margin: 60rpx 30rpx;
			color: #fff;
			background-color: #5677fc;
			font-size: 32rpx;
			border-radius: 50rpx;
		}
	}
</style>